<template>
  <div class="comment">
    <div class="score df">
      <div class="df fdc jcsb jcc aic">
        <div class="num">{{ shopData.score / 20 }}</div>
        <div class="composite-score">综合评分</div>
        <div class="compare">高于周边商家96%</div>
      </div>
      <div class="star df fdc jcsb">
        <div>
          <span class="mr">服务态度</span>
          <van-rate
            color="#ff9210"
            :size="16"
            v-model="shopData.score"
            readonly
          />
        </div>
        <div>
          <span class="mr">菜品质量</span>
          <van-rate
            color="#ff9210"
            :size="16"
            v-model="shopData.score"
            readonly
          />
        </div>
        <div class="df aic">
          <span class="mr">送达时间</span>
          <div class="time">{{ shopData.deliveryTime + '分钟' }}</div>
        </div>
      </div>
    </div>
    <div class="evaluate">
      <van-tabs
        class="size"
        title-active-color="#000"
        duration="0.1"
        color="#ffc300"
        type="card"
      >
        <van-tab
          :name="item.title"
          :key="item.title"
          v-for="item in navs"
          :title="item.title"
        ></van-tab>
      </van-tabs>
      <div class="info df" v-for="(item, index) in rateData" :key="index">
        <img class="avatar" :src="item.avatar" alt="" />
        <div class="content">
          <div class="usernam df jcsb">
            <div>{{ item.username }}</div>
            <div>{{ item.rateTime | YMDhms }}</div>
          </div>
          <div>
            <van-rate
              color="#ff9210"
              :size="16"
              v-model="item.score"
              readonly
            />
            <span>{{ item.deliveryTime }}分钟送达</span>
          </div>
          <div>{{ item.text }}</div>
          <div class="tag">
            <van-tag
              plain
              type="primary"
              v-for="(v, i) in item.recommend"
              :key="i"
            >
              {{ v }}
            </van-tag>
          </div>
        </div>
      </div>
      <van-divider />
    </div>
  </div>
</template>

<script>
import {getShopRateReq} from '@/api/shop'
// 获取数据
import {mapState} from 'vuex'
export default {
  data() {
    return {
      rateData: [],
      //导航数据
      navs: [
        {
          title: '全部',
        },
        {
          title: '满意',
        },
        {
          title: '不满意',
        },
      ],
    }
  },
  methods: {
    async getData() {
      //发请求
      let res = await getShopRateReq()
      // 解构数据
      let {data} = res.data
      // 数据赋值
      this.rateData = data
    },
  },
  created() {
    this.getData()
  },
  computed: {
    ...mapState('shop', ['shopData']),
    score() {
      return this.shopData.score.toFixed(1)
    },
  },
}
</script>

<style lang="scss" scoped>
.score {
  padding: 30px;
  border-top: 1px solid #e1e1e1;
  width: 100%;
  height: 160px;
  background: white;
  .num {
    font-size: 46px;
    font-weight: 550;
    color: #f2d45d;
  }
  .omposite-score {
    font-size: 24px;
  }
  .compare {
    color: #999;
    font-size: 14px;
  }
  .star {
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid #d1d1d1;
  }
  .mr {
    font-weight: 550;
    font-size: 18px;
    margin-right: 6px;
  }
  .time {
    font-size: 18px;
    color: #999;
  }
}
.evaluate {
  margin-top: 50px;
  background: #fff;
  min-height: 200px;
  padding: 35px;
  .size {
    font-size: 16px;
    font-weight: bold;
    border-radius: 15px;
    margin-bottom: 30px;
  }
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 30px;
    margin-bottom: 40px;
  }
}
.usernam {
  width: 370px;
  margin-left: 10px;
}
.van-rate {
  margin: 10px 15px 10px 10px;
}
.info {
  margin-bottom: 20px;
}
.tag {
  margin-top: 15px;
}
.van-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>
